<template>
  <div
    class="rt-container"
    v-if="!loading"
    :style="disableStyle"
  >
    <div class="rt-table">
      <el-table
        :data="table.rows"
        border
        :scrollbar-always-on="true"
        style="width: 100%; border-radius: 8px"
      >
        <el-table-column
          fixed
          prop="label"
          label=""
          width="150"
        ></el-table-column>
        <el-table-column
          min-width="150"
          v-for="(col, index) in table.columns"
          :key="index"
          :label="col.label"
        >
          <template #default="scope">
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-model="dataValue[scope.row.id][col.id]"
              clearable
              :disabled="disabledProp"
              style="width: 100%"
              @change="handleChange"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="MatrixInput">
import { matrixInputProps, useMatrixInput } from "./useMatrixInput";
import { useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";

const props = defineProps({
  ...matrixInputProps
});

const emit = defineEmits(["update:value", "change"]);

const { dataValue, loading, handleChange } = useMatrixInput(props, emit);
const { disableStyle, disabledProp } = useFormItem(props, emit, false);
</script>

<style lang="scss" scoped>
.rt-container {
  padding: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;

  :deep(.el-input__inner) {
    border: none;
    padding: 0;
    background: transparent;
  }

  .rt-table {
    width: 100%;
  }

  th,
  td {
    text-align: center;
    vertical-align: middle !important;
  }

  .el-input {
    width: 70%;
  }
}
</style>
